<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="已办事项"
    width="50%"
    draggable
    overflow
    @close="handleClose"
  >
    <div class="crossRope" />
    <vxe-table
      border
      header-align="center"
      height="300"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="taskTableList"
      :loading="taskTableLoading"
      size="mini"
      :pager-config="tablePage"
      style="margin-top: 2%"
    >
      <vxe-column type="seq" width="60" title="序号" align="center" />
      <vxe-column
        v-for="column in taskTableCloumns"
        :key="column.field"
        :field="column.field"
        :title="column.title"
        :min-width="column.width"
        :align="column.align"
        show-overflow
      >
        <template v-slot:default="{ row }">
          {{ row[column.field] }}
        </template>
      </vxe-column>
      <vxe-column title="操作" min-width="80" align="center" fixed="right">
        <template v-slot:default="{ row }">
          <vxe-button type="text" size="small" @click="gotoViewDetail(row)">
            查看
          </vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      v-model:current-page="tablePage.currentPage"
      v-model:page-size="tablePage.pageSize"
      :layouts="[
        'Sizes',
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'FullJump',
        'Total'
      ]"
      :total="tablePage.total"
      size="mini"
      style="margin-top: 2%"
      @page-change="handlePageChange"
    />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, reactive, onMounted } from "vue";
import { ElDialog, ElMessage } from "element-plus";
import { VxePagerEvents } from "vxe-table";
import { useDetail } from "../utils/hooks";
import { getAuditTaskList } from "@/api/ERP_public";

// 路由跳转
const { toDetail } = useDetail();
// 弹窗关闭/打开事件
const props = defineProps({
  visible: Boolean
});
const dialogFormVisible = ref(false);
watch(
  () => props.visible,
  val => {
    dialogFormVisible.value = val;
  },
  { immediate: true }
);
const emit = defineEmits(["close"]);
function handleClose() {
  emit("close", false);
}
// 表格相关数据
let taskTableList = ref([]);
let taskTableLoading = ref(false);
let taskTableCloumns = ref([
  {
    field: "bizTypeName",
    title: "待办类型",
    width: 100,
    align: "center"
  },
  {
    field: "bizName",
    title: "标题",
    width: 100,
    align: "center"
  },
  {
    field: "createdUserName",
    title: "发起人",
    width: 100,
    align: "center"
  },
  {
    field: "createdAt",
    title: "审批发起时间",
    width: 100,
    align: "center"
  },
  {
    field: "taskAt",
    title: "任务到达时间",
    width: 100,
    align: "center"
  }
]);
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});
const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  getTaskList(false);
};
// 根据代办类型跳转详情页
function gotoViewDetail(row: any) {
  switch (row.bizTypeName) {
    case "销售合同":
      toDetail({ id: row.bizId, title: row.bizName }, "salecontract");
      break;
    case "采购合同":
      toDetail({ id: row.bizId, title: row.bizName }, "purchasecontract");
      break;
    case "项目订单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "purchaseapply"
      );
      break;
    case "项目对账单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "reconciliation"
      );
      break;
    case "项目结算单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "reconciliationSettlement"
      );
      break;
    case "供应商对账单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "spreconciliation"
      );
      break;
    case "供应商结算单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "spreconciliationSettlement"
      );
      break;
    // case "项目发票":
    //   break;
    // case "供应商发票":
    //   break;
    // case "收款管理":
    //   break;
    // case "付款管理":
    //   break;
    default:
      ElMessage.error(
        "详情页面： " + row.bizTypeName + " 正在开发中，请联系管理员"
      );
  }
}
// 获取事项列表
async function getTaskList(isBacklog: boolean) {
  taskTableLoading.value = true;
  let params: ApiParams = {};
  params.pageIndex = tablePage.currentPage;
  params.pageSize = tablePage.pageSize;
  params.isBacklog = isBacklog;
  try {
    const response: ApiResponse = await getAuditTaskList(params);
    taskTableList.value = response.data.records;
    tablePage.total = response.data.totalElements;
  } catch (error) {
    ElMessage.error("获取表格数据失败");
  } finally {
    taskTableLoading.value = false;
  }
}
// 初始化
onMounted(async () => {
  await getTaskList(false);
});
</script>

<style lang="scss" scoped></style>
